<template>
  <div class="register-page">
    <div class="form-container">
      <h1>注册</h1>
      <form @submit.prevent="handleRegister" class="form">
        <div class="form-group">
          <div class="icon-container">
            <a href="http://test.codelover.club/static/img/headLogo.d458f61f.png" target="_blank">
              <img src="http://test.codelover.club/static/img/headLogo.d458f61f.png" alt="logo" class="icon">
            </a>
          </div>
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="username">
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" v-model="email">
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="password">
        </div>
        <div class="form-group">
          <label for="confirm-password">确认密码</label>
          <input type="password" id="confirm-password" v-model="confirmPassword">
        </div>
        <div class="form-group">
          <label for="user-type">用户类型</label>
          <select id="user-type" v-model="userType">
            <option value="">选择用户类型</option>
            <option value="individual">学生用户</option>
            <option value="business">教师用户</option>
          </select>
        </div>
        <div class="form-group">
          <input type="checkbox" id="agree">
          <label for="agree">我同意注册协议</label>
        </div>
        <button type="submit">注册</button>
      </form>
    </div>
    <div class="text-container">
      <p class="vertical-text">
        <span>程</span>
        <span>序</span>
        <span>员</span>
        <span>的</span>
        <span>梦</span>
        <span>工</span>
        <span>厂</span>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      userType: ''
    };
  },
  mounted() {
    document.body.style.backgroundColor = 'pink'; // 设置登录页面背景颜色
  },
  beforeUnmount() {
    document.body.style.backgroundColor = ''; // 组件销毁时恢复背景颜色为空
  },
  methods: {
    handleRegister() {
      // 点击注册按钮时跳转到一个路由页面
      this.$router.push('/login');
    }
  }
});
</script>
  
  <style scoped>
  .register-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .form-container {
    width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 4px;
  }
  
  h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  button {
    width: 100%;
    padding: 10px 20px;
    background-color: #3b36cb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .icon-container {
    text-align: center;
  }
  
  .icon {
    width: 50px;
    height: 50px;
  }
  
  .text-container {
    position: absolute;
    right: 40px;
    top: 40%; /* 将文字容器向上移一些 */
    transform: translateY(-50%);
    writing-mode: vertical-lr;
    margin-right: 400px;
    line-height: 400px; 
  }
  .vertical-text {
    color: rgb(31, 50, 134);
    font-size: 24px; /* 将文字大小设置为24px */
    margin-bottom: 10px; /* 增加文字与文字之间的垂直间距 */
    line-height: 400px; /* 增大文字之间的上下间隔 */
  }
  
  </style>